import React, { Component } from 'react'
import './mainPage.less'
import { Card, Input } from 'antd'

export default class mainPage extends Component {

  state = {
    cardArray: [
      
    ],
    filterCardArray: []
  }

  componentWillMount() {
    this.setState({filterCardArray: this.state.cardArray});
  }

  // 卡片点击事件
  cardClick(router) {
    window.open(router, '_blank');
  }
  // 搜索事件
  search(value) {
    this.setState({
      filterCardArray: value ? this.state.cardArray.filter(item => item.name.indexOf(value) >= 0) : this.state.cardArray
    });
  }

  render() {
    const searchDom = <Input.Search className="title-search" placeholder="请输入名称搜索" onSearch={value => this.search(value)} enterButton />
    return (
      <section className="main-page">
        <Card title={searchDom}>
          {this.state.filterCardArray.map((item, index) =>
            <Card.Grid key={index} onClick={() => this.cardClick(item.router)}>{item.name}</Card.Grid>
          )}
        </Card>
      </section>
    )
  }
}
